<template>
  <el-dialog title="车辆里程调整" :visible="visible" width="550px" append-to-body @close="close" :close-on-click-modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="车牌号" prop="carNo">
            <el-input disabled class="el-input-style" v-model="form.carNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="当前里程/km" prop="useMileage">
            <el-input v-model="form.useMileage" placeholder="请输入当前里程" class="el-input-style" @keyup.native="
                    form.useMileage = oninput(form.useMileage, 2)
                    "/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="保养周期/km" prop="maintenanceCycle">
            <el-input v-model="form.maintenanceCycle" placeholder="请输入保养周期" class="el-input-style" @keyup.native="
                    form.maintenanceCycle = oninput(form.maintenanceCycle, 2)
                    "/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="下次保养公里数/km" prop="nextMile">
            <el-input v-model="form.nextMile" placeholder="请输入下次保养公里数" class="el-input-style" @keyup.native="
                    form.nextMile = oninput(form.nextMile, 2)
                    "/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="medium" :loading="loading" @click="confim">确 定</el-button>
      <el-button @click="close" size="medium">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {updateMileage} from "@/api/car/car_basic";

export default {
  props: {},
  data() {
    // 这里存放数据
    return {
      visible: false,
      loading: false,
      form: {
        id: null,
        carNo: null,
        useMileage: null,
        maintenanceCycle: null,
        nextMile: null,
        remark: null,
      },
      // 表单校验
      rules: {
        useMileage: [
          {
            required: true,
            message: '请输入当前里程',
            trigger: 'blur',
          },
        ],
        maintenanceCycle: [
          {
            required: true,
            message: '请输入保养周期',
            trigger: 'blur',
          },
        ],
        nextMile: [
          {
            required: true,
            message: '请输入下次保养公里数',
            trigger: 'blur',
          },
        ]
      },
    }
  },

  // 方法集合
  methods: {

    show(carInfo) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        this.form.id = carInfo.carId;
        this.form.carNo = carInfo.carNo;
        this.form.useMileage=carInfo.useMileage;
        this.form.maintenanceCycle=carInfo.maintenanceCycle;
        this.form.nextMile=carInfo.nextMile;
      })

    },
    confim() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          updateMileage(this.form).then(res=>{
            this.visible = false;
            this.$message.success('调整成功')
            this.$emit('success')
          }).finally(f=>{
            this.loading = false;
          })
        }
      })
    },
    close() {
      this.visible = false;
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
    this.getOriginList();
  },

}
</script>

<style lang="scss" scoped>
</style>
